import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xvideos/assets_tool/images.dart';
import 'package:xvideos/hj_utils/global.dart';
import 'package:xvideos/hj_utils/widget_utils.dart';
import 'package:xvideos/tools_base/global_store/store.dart';
import 'package:xvideos/tools_base/widget/net_image_widget.dart';
import 'package:provider/provider.dart';

import 'edit_select_portrait_logic.dart';

class SelectPortraitPage extends StatelessWidget {
  const SelectPortraitPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SelectPortraitLogic>(
        init: SelectPortraitLogic(),
        global: false,
        builder: (controller) {
          return Scaffold(
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
              title: Text('选择头像'),
              actions: [
                Consumer<GlobalStore>(
                  builder: (context, value, child) => InkWell(
                    onTap: () {
                      if ((value.meInfo?.urrPortraitStatus ?? 0) == 1) {
                        showToast('头像审核中~');
                        return;
                      }
                      if ((controller.selectIndex ?? -1) < 0) {
                        showToast('请选择头像再上传～');
                        return;
                      }
                      controller.submit(
                        context,
                        controller.dataModel[controller.selectIndex ?? 0].resource ?? "",
                        false,
                        isDefaultSource: true,
                      );
                    },
                    child: Text(
                      '保存',
                      style: TextStyle(color: Color(0xff666666), fontSize: 16),
                    ),
                  ),
                ),
                18.sizeBoxW,
              ],
            ),
            body: Column(
              children: [
                Container(
                  width: Get.width,
                  height: 150,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned.fill(child: Image.asset('avatar_background.webp'.mineImgPath)),
                      Positioned(
                        bottom: 0,
                        child: Container(
                          height: 100,
                          width: Get.width,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.transparent, Color(0xff0E141E)]),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 38,
                        child: GestureDetector(
                          onTap: () {
                            controller.selectImage(context);
                          },
                          child: NetworkImageLoader(
                            imageUrl: globalStore.getMe()?.portrait ?? '',
                            width: 80,
                            height: 80,
                            borderRadius: 40,
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        child: Text(
                          '从相册中选择',
                          style: TextStyle(color: Color(0xff666666), fontSize: 14),
                        ),
                      )
                    ],
                  ),
                ),
                Expanded(child: _buildList(controller))
              ],
            ),
          );
        });
  }

  Widget _buildList(SelectPortraitLogic logic) {
    return GridView.builder(
      padding: EdgeInsets.fromLTRB(32, 24, 32, 20),
      itemCount: logic.dataModel.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        mainAxisSpacing: 20,
        crossAxisSpacing: 20,
        childAspectRatio: 1,
      ),
      itemBuilder: (context, index) => GestureDetector(
        onTap: () {
          logic.select(index);
        },
        child: Stack(
          fit: StackFit.expand,
          children: [
            NetworkImageLoader(
              imageUrl: logic.dataModel[index].resource ?? '',
              borderRadius: 60,
            ),
            if (index == logic.selectIndex)
              Positioned(
                right: 0,
                bottom: 0,
                child: Image.asset(
                  'selected_green.png'.commonImgPath,
                  width: 16,
                ),
              ),
          ],
        ),
      ),
    );
  }
}
